{extend name='admin@public/content'}
{block name='style'}
<style>
    img:hover{
        background-color: grey;
    }
    span{
        cursor: pointer;
    }
</style>
{/block}
{block name='content'}
<div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong>图片请上传png格式的透明图</strong>
</div>
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px'>
    <div class="row">
        {if !empty($db['lists'])}
    {foreach $db['lists'] as $k=>$v}
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-body">
                <div>
                <img data-tips-image style="height:70px;max-width:50%;" src="{$v.thumb ?: '__STATIC__/theme/img/image.png'}"/>
                <input type="hidden" name="lists[{$k}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="{$v.thumb ?: ''}" class="layui-input">
                <a class="btn btn-link" data-file="one" data-uptype="" data-width="" data-height="" data-type="png,jpg,jpeg" data-field="lists[{$k}][thumb]">上传图片</a>
                </div>

                标题：<input type="text" name="lists[{$k}][title]" value="{$v.title}" class="layui-input">
                内容：<input type="text" name="lists[{$k}][content]" value="{$v.content}" class="layui-input">
                链接：<input type="text" name="lists[{$k}][link]" value="{$v.link}" class="layui-input">
            </div>
            <div class="panel-footer text-right">
                <span class="layui-badge layui-bg-blue down">下移</span>
                <span class="layui-badge layui-bg-blue up">上移</span>
                <span class="layui-badge del">删除</span>
            </div>
        </div>
    </div>
    {/foreach}
        {else}
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div>
                        <img data-tips-image style="height:70px;max-width:50%;" src="__STATIC__/theme/img/image.png"/>
                        <input type="hidden" name="lists[0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                        <a class="btn btn-link" data-file="one" data-uptype="" data-width="" data-height="" data-type="png,jpg,jpeg" data-field="lists[0][thumb]">上传图片</a>
                    </div>

                    标题：<input type="text" name="lists[0][title]" value="" class="layui-input">
                    内容：<input type="text" name="lists[0][content]" value="" class="layui-input">
                    链接：<input type="text" name="lists[0][link]" value="" class="layui-input">
                </div>
                <div class="panel-footer text-right">
                    <span class="layui-badge layui-bg-blue down">下移</span>
                    <span class="layui-badge layui-bg-blue up">上移</span>
                    <span class="layui-badge del">删除</span>
                </div>
            </div>
        </div>
        {/if}
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-8">
        <div class="layui-form-item text-left">
            <button class="layui-btn layui-btn-normal add" type="button">添加</button>

            <button class="layui-btn" type="submit">保存</button>
        </div>
    </div>
</form>

{/block}
{block name="script"}
<script>
    var key;
    $(function () {
        key = $('.row .col-sm-3').length-1;
    })
    $('.add').on('click',function () {
        key++;
        var html_str = `<div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div>
                        <img data-tips-image style="height:70px;max-width:50%;" src="__STATIC__/theme/img/image.png"/>
                        <input type="hidden" name="lists[${key}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                        <a class="btn btn-link" data-file="one" data-uptype="" data-width="" data-height="" data-type="png,jpg,jpeg" data-field="lists[${key}][thumb]">上传图片</a>
                    </div>

                    标题：<input type="text" name="lists[${key}][title]" value="" class="layui-input">
                    内容：<input type="text" name="lists[${key}][content]" value="" class="layui-input">
                    链接：<input type="text" name="lists[${key}][link]" value="" class="layui-input">
                </div>
                <div class="panel-footer text-right">
                <span class="layui-badge layui-bg-blue down">下移</span>
                <span class="layui-badge layui-bg-blue up">上移</span>
                <span class="layui-badge del">删除</span>
            </div>
            </div>
        </div>`;
        $('.row').append(html_str);
    })

    $('.row').on('click','.del',function () {
        $(this).parents('.col-sm-3').remove();
    })

    $('.row').on('click','.up',function () {
        var parentsDiv = $(this).parents(".col-sm-3");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('.row').on('click','.down',function () {
        var parentsDiv = $(this).parents(".col-sm-3");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })

</script>
{/block}